<template>
  <div :id="id" :style="{ height: height, width: width }">
  </div>
</template>

<script>
export default {
  name: "PieChart",
  props: {
    className: {
      type: String,
      default: "pieChart",
    },
    id: {
      type: String,
      default: "pieChart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    pieChartData: {
      type: Array,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // console.log(echarts);
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id));
      // 绘制图表

      let options = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show:false
        },
				color:['#FE4E75','#6D77E6','#FFDA5D','#3BDEFF'],
        series: [
          {
            type: "pie",
            radius: ["60%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position:'inside',
              formatter:'{d}%',
              color:'#fff'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.pieChartData
          },
        ],
      };

      myChart.setOption(options);
      //
    },
  },
};
</script>

<style></style>
